import React from 'react';
import { ModelViewer } from './ModelViewer';
import { RELATION_TYPES } from '../utils/constants';
import './HerbDetail.css';

interface HerbDetailProps {
  herb: any;
  relatedHerbs?: Array<{
    herb: any;
    relation: {
      type: string;
      strength: number;
    };
  }>;
  onRelatedHerbClick?: (herbId: string) => void;
  onClose: () => void;
}

export const HerbDetail: React.FC<HerbDetailProps> = ({ herb, relatedHerbs = [], onRelatedHerbClick, onClose }) => {
  if (!herb) {
    return (
      <div className="herb-detail">
        <div className="herb-detail-header">
          <h2>请选择一种药材</h2>
          <button className="close-btn" onClick={onClose}>&times;</button>
        </div>
        <div className="herb-detail-body">
          <p>点击左侧列表中的药材查看详情</p>
        </div>
      </div>
    );
  }
  
  // 检查数据完整性
  const herbComplete = herb && herb.properties && herb.properties.性 && herb.properties.味 && Array.isArray(herb.properties.味);
  
  const getRelationTypeColor = (type: string) => {
    const relationType = RELATION_TYPES.find(r => r.name === type);
    return relationType ? relationType.color : '#777777';
  };

  const getRelationTypeDescription = (type: string) => {
    const relationType = RELATION_TYPES.find(r => r.name === type);
    return relationType ? relationType.description : '';
  };

  if (!herbComplete) {
    return (
      <div className="herb-detail loading-herb">
        <div className="loading-spinner"></div>
        <p>加载药材详情...</p>
      </div>
    );
  }

  return (
    <div className="herb-detail">
      <div className="herb-header">
        <h2 className="herb-name">{herb.name}</h2>
        <div className="herb-model">
          <ModelViewer modelName={herb.id} />
        </div>
      </div>
      
      <div className="herb-content">
        <div className="detail-section basic-info">
          <h3>基本信息</h3>
          <div className="info-grid">
            <div className="info-item">
              <span className="info-label">分类:</span>
              <span className="info-value">{herb.category || '未分类'}</span>
            </div>
            <div className="info-item">
              <span className="info-label">性质:</span>
              <span className="info-value">{herb.properties.性}</span>
            </div>
            {herb.properties.味.length > 0 && (
              <div className="info-item">
                <span className="info-label">味道:</span>
                <span className="info-value">{herb.properties.味.join('、')}</span>
              </div>
            )}
          </div>
        </div>
        
        {herb.functions && herb.functions.length > 0 && (
          <div className="detail-section">
            <h3>功效作用</h3>
            <div className="functions">
              {herb.functions.map((func: string, index: number) => (
                <span key={index} className="function-tag">{func}</span>
              ))}
            </div>
          </div>
        )}
        
        {herb.description && (
          <div className="detail-section">
            <h3>药材描述</h3>
            <p className="description">{herb.description}</p>
          </div>
        )}
        
        {herb.pairs && herb.pairs.length > 0 && (
          <div className="detail-section">
            <h3>常用配伍</h3>
            <ul className="pairs">
              {herb.pairs.map((pair: string, index: number) => (
                <li key={index}>{pair}</li>
              ))}
            </ul>
          </div>
        )}
      </div>
      
      {relatedHerbs.length > 0 && (
        <div className="related-herbs detail-section">
          <h3>相关药材</h3>
          <div className="related-herbs-list">
            {relatedHerbs.map(({ herb: relatedHerb, relation }) => (
              <div 
                key={relatedHerb.id} 
                className="related-herb-item"
                onClick={() => onRelatedHerbClick && onRelatedHerbClick(relatedHerb.id)}
              >
                <div className="related-herb-info">
                  <h4>{relatedHerb.name}</h4>
                  <span className="related-herb-category">{relatedHerb.category}</span>
                </div>
                <div className="relation-badge" style={{ backgroundColor: getRelationTypeColor(relation.type) }}>
                  {relation.type}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}; 